<template>
  <div class="app-container">
    <!--    使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。-->
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">

      <el-table-column min-width="10%" align="center" label="id">
        <template slot-scope="{row}">
          <span>{{ row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="20%" align="center" label="昵称">
        <template slot-scope="{row}">
          <span>{{ row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="头像" min-width="20%">
        <template slot-scope="{row}"><!--row只作用于当前区域-->
          <div v-if="row._isNew" class="newDiv">
            <el-badge value="new" class="newBadge">
              <img :src="row.image" alt="http://image.xiaobaibai.ink/imageOutTime.png">
            </el-badge>
          </div>
          <div v-else>
            <img :src="row.image">
          </div>
        </template>
      </el-table-column>

      <el-table-column min-width="30%" align="center" label="最后上线日期">
        <template slot-scope="{row}">
          <span>{{ row.lastOnlineTime | formatDate }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="20%">
        <template slot-scope="{row}">
          <div v-if="row._isNew">
            <el-button size="mini" type="success" @click="welcomeUser(row)">欢迎</el-button>
          </div>
          <div v-else>
            <el-button size="mini" type="danger" @click="delUser(row)">删除</el-button>
          </div>
        </template>
      </el-table-column>

    </el-table>

    <div class="pageHelper">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="allList.length"
        hide-on-single-page
        @current-change="changPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

  import {ApiWelcomeUser, delUser, getUserList} from '@/api/user'
  import {parseTime} from "@/utils";

  export default {
  name: 'userManagement',
  filters: {
    formatDate(time) {
      return parseTime(time,'{y}-{m}-{d} {h}:{i}')
    }
  },
  data() {
    return {
      allList: [],
      list: null,
      listLoading: true,//加载中
      currentIndex: 1,
      limit: 10
    }
  },
  created() {
    this.getList()//初始化数据
  },
  methods: {
    async getList() {
      const { data } = await getUserList()//同步等待结果
      console.log(data)
      let newDate=null;
      let index=0;
      newDate = data.map(v => {
        v.index=index;
        index++;
        return v
      })
      console.log(newDate)
      this.allList=newDate;
      this.list=data.slice(0,this.limit)//>=0&&<=9 10个
      this.listLoading = false//加载完毕
    },
    delUser(row) {
      console.log(row)
      this.$confirm('确定要删除此用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser(row.id).then(()=>{
          this.allList.splice(row.index,1);
          for(let i=row.index;i<this.allList.length;i++){
            this.allList[i].index-=1;
          }
          this.changPage(this.currentIndex);
          this.$message({
            type: 'success',
            message: '已删除'
          });
        }).catch(()=>{
          this.$message({
            type: 'warning',
            message: '删除失败'
          });
        })
      }).catch(()=>{
        //取消删除
      });
    },
    welcomeUser(row){
      row._isNew=false;
      ApiWelcomeUser(row.id);
      const h = this.$createElement;
      this.$message({
        message: h('p', null, [
          h('span', null, '🎉欢迎新用户:'),
          h('i', { style: 'color: teal' }, row.username)
        ]),
        center: true,
        type:'success'
      });
    },
    changPage(currentIndex){
      if(currentIndex>Math.ceil(this.allList.length/this.limit))//向上取整
        currentIndex=Math.ceil(this.allList.length/this.limit);
      this.currentIndex=currentIndex;
      const arr=this.getListArray;
      this.list=this.allList.slice(arr[0],arr[1]);
    }
  },
  computed:{
    getListArray(){
      const currentIndex=this.currentIndex;
      const start=(currentIndex-1)*this.limit;//起始下标
      const end=start+this.limit;
      return [start,end];
    }
  }
}
</script>

<style lang="scss" scoped>
  .user-manager{
    width: 100%;
  }
  .pageHelper{
    text-align:center;
    margin-top: 30px;
  }
  .newBadge {
    margin-top: 10px;
    margin-right: 40px;
  }
  .newDiv{
    padding-left: 40px;
  }
</style>
